<template>
  <div
    :class="showDrawer ? 'messageDrawer messageDrawer_show' : 'messageDrawer'"
  >
    <div class="messageDrawer_content">
      <div v-if="msgList[msgIndex] && msgList[msgIndex].msgType == 1">
        <div class="drawer_head">
          <span class="head_title">系统公告</span>
          <!-- <span class="head_time">{{ msgList[msgIndex].createTime }}</span> -->
          <span class="head_time">{{ msgTime }}</span>
        </div>
        <div class="drawer_content">
          <div class="drawer_content_title">{{ msgList[msgIndex].title }}</div>
          <div class="contentText">{{ msgList[msgIndex].content }}</div>
        </div>
        <div class="drawer_btn">
          <div class="btn_left" v-if="msgList.length > 1">
            <span class="arrow_icon_left">
              <i-ep-ArrowLeft
                class="arrow_icon"
                v-show="msgIndex > 0"
                @click="toPrevious"
            /></span>
            <span class="left_content"
              >{{ msgIndex + 1 }} / {{ msgList.length }}</span
            >
            <i-ep-ArrowRight
              class="arrow_icon"
              v-show="msgIndex < msgList.length - 1"
              @click="toNext"
            />
          </div>
          <div class="btn_right">
            <el-button type="warning" @click="markRead">我知道了</el-button>
          </div>
        </div>
      </div>
      <div
        v-if="
          msgList[msgIndex] &&
          (msgList[msgIndex].msgType == 2 || msgList[msgIndex].msgType == 3)
        "
      >
        <div class="drawer_head">
          <span class="head_title">报警消息</span>
          <span class="head_time">{{ msgTime }}</span>
        </div>
        <div class="drawer_content">
          <div class="drawer_content_title">
            <img
              src="@/assets/images/emergent.png"
              alt=""
              v-if="msgList[msgIndex].alarmLevelName == '危急'"
            />
            <img
              src="@/assets/images/critical.png"
              alt=""
              v-if="msgList[msgIndex].alarmLevelName == '紧急'"
            />
            <img
              src="@/assets/images/generally.png"
              alt=""
              v-if="msgList[msgIndex].alarmLevelName == '一般'"
            />
            <img
              src="@/assets/images/remind.png"
              alt=""
              v-if="msgList[msgIndex].alarmLevelName == '提醒'"
            />
            <span class="drawer_title_content">
              <span>【{{ msgList[msgIndex].alarmTypeName }}】</span>
              <span>{{ msgList[msgIndex].deviceLocation }}</span>
            </span>
          </div>
          <div>{{ msgList[msgIndex].content }}</div>
        </div>
        <div class="drawer_btn">
          <div class="btn_left" v-if="msgList.length > 1">
            <span class="arrow_icon_left">
              <i-ep-ArrowLeft
                class="arrow_icon"
                v-show="msgIndex > 0"
                @click="toPrevious"
            /></span>
            <span class="left_content"
              >{{ msgIndex + 1 }} / {{ msgList.length }}</span
            >
            <i-ep-ArrowRight
              class="arrow_icon"
              v-show="msgIndex < msgList.length - 1"
              @click="toNext"
            />
          </div>
          <div class="btn_right">
            <el-button @click="closeDrawer">忽 略</el-button>
            <el-button type="warning" @click="toDealWith">前往处理</el-button>
          </div>
        </div>
      </div>
      <div v-if="msgList[msgIndex] && msgList[msgIndex].msgType == 4">
        <div class="drawer_head">
          <span class="head_title">平台公告</span>
          <!-- <span class="head_time">{{ msgList[msgIndex].createTime }}</span> -->
          <span class="head_time">{{ msgTime }}</span>
        </div>
        <div class="drawer_content">
          <div class="drawer_content_title">{{ msgList[msgIndex].title }}</div>
          <div class="contentText">{{ msgList[msgIndex].content }}</div>
        </div>
        <div class="drawer_btn">
          <div class="btn_left" v-if="msgList.length > 1">
            <span class="arrow_icon_left">
              <i-ep-ArrowLeft
                class="arrow_icon"
                v-show="msgIndex > 0"
                @click="toPrevious"
            /></span>
            <span class="left_content"
              >{{ msgIndex + 1 }} / {{ msgList.length }}</span
            >
            <i-ep-ArrowRight
              class="arrow_icon"
              v-show="msgIndex < msgList.length - 1"
              @click="toNext"
            />
          </div>
          <div class="btn_right">
            <el-button type="warning" @click="markRead">我知道了</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { msgQueryDetail } from "@/http/message";
import { useMain, store } from "@/store/index";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";

const useMainStore = useMain(store); //pinia
const router = useRouter();

//showDrawer 是否展示全局消息弹窗 msgList 实时消息列表
let { showDrawer, msgList, userInfo } = storeToRefs(useMainStore); //storeToRefs 保持响应式

// console.log('48showDrawer', useMainStore.showDrawer);
// console.log('showDrawer', showDrawer.value);
// console.log('msgList', msgList.value);

let msgTime = ref("");
let msgIndex = ref(0);

const timeCycle = (time: any) => {
  const date = new Date(time);
  const y = date.getFullYear();
  let m: any = date.getMonth() + 1;
  let d: any = date.getDate();
  let hh: any = date.getHours();
  let mm: any = date.getMinutes();
  let ss: any = date.getSeconds();
  m = m < 10 ? "0" + m : m;
  d = d < 10 ? "0" + d : d;
  hh = hh < 10 ? "0" + hh : hh;
  mm = mm < 10 ? "0" + mm : mm;
  ss = ss < 10 ? "0" + ss : ss;
  // console.log(y == new Date().getFullYear());
  let result = "";
  if (y != new Date().getFullYear()) {
    //不是今年
    result = `${y}-${m}-${d}`;
  } else {
    //是今年
    if (new Date(time).toDateString() === new Date().toDateString()) {
      // console.log('当天');
      result = `${hh}:${mm}:${ss}`;
    } else if (new Date(time) < new Date()) {
      // console.log('之前时间');
      result = `${m}-${d}`;
    }
  }
  // console.log('result', result);

  return result;
};
//转换时间
const getMsgTime = () => {
  let createTime = msgList.value[msgIndex.value].createTime;
  msgTime.value = timeCycle(createTime);
};

watch(
  msgList,
  (newVal) => {
    if (!newVal || newVal.length == 0) {
      useMainStore.updatedShowDrawer(false); //关闭弹窗
    } else {
      getMsgTime();
    }
  },
  { immediate: true, deep: true }
);

const handleClose = (done: any) => {
  done();
};

//关闭当前消息
const closeDrawer = () => {
  // if(msgList.value.length==1){
  //     useMainStore.updatedMsgList([]);
  // }
  let msgList_new = JSON.parse(JSON.stringify(msgList.value));
  msgList_new.splice(msgIndex.value, 1);
  useMainStore.updatedMsgList(msgList_new);
  if (msgIndex.value > 0 && msgIndex.value > msgList_new.length - 1) {
    msgIndex.value--;
  }
};

//点击我知道了
const markRead = (toDealWith: any) => {
  let userMsgId = msgList.value[msgIndex.value].userMsgId
    ? msgList.value[msgIndex.value].userMsgId
    : {};
  let msgId = "";
  //查找出当前用户对应的消息id
  if (msgList.value[msgIndex.value].userMsgId) {
    for (var key in userMsgId) {
      if (key == userInfo.value.id) {
        msgId = userMsgId[key];
      }
    }
  }
  // console.log('msgId',msgId);

  if (!msgId) {
    return;
  }
  //调用查看详情接口
  msgQueryDetail(msgId).then((res: any) => {
    useMainStore.delMsgNum(); //顶部消息数-1
    let type = msgList.value[msgIndex.value].msgType;
    let timestamp = new Date().getTime(); // 获取当前时间戳
    let alarmRecordId = msgList.value[msgIndex.value].alarmRecordId;
    closeDrawer();
    let currentPath = router.currentRoute.value.path; //当前路由
    //系统公告,如果在消息页面点击我知道了,要更新未读消息数和列表
    if (type == 1) {
      if (currentPath == "/information/message") {
        // router.push('/message?timestamp=' + timestamp);
        useMainStore.updatedNeedUpdate(true);
      }
    }

    //如果是点击的去处理,跳转到报警接收页面
    if (toDealWith && toDealWith == "toDealWith") {
      //如果当前页面已经是报警接收页面,用replace,否则用push
      let alarm_type = type == 2 ? 1 : 2;
      if (currentPath == "/alarmCenter/alarmReception") {
        router.replace(
          "/alarmCenter/alarmReception?type=" +
            alarm_type +
            "&id=" +
            alarmRecordId +
            "&timestamp=" +
            timestamp
        );
      } else {
        router.push(
          "/alarmCenter/alarmReception?type=" +
            alarm_type +
            "&id=" +
            alarmRecordId +
            "&timestamp=" +
            timestamp
        );
      }
    }
  });
};

//去处理
const toDealWith = () => {
  markRead("toDealWith"); //调用我知道了方法(顶部消息数-1,关闭当前消息)
};

const toPrevious = () => {
  if (msgIndex.value > 0) {
    msgIndex.value--;
    getMsgTime();
  }
};

const toNext = () => {
  msgIndex.value++;
  getMsgTime();
};
</script>

<style scoped lang="scss">
.messageDrawer {
  width: 384px;
  height: 0;
  // height: auto;
  padding: 0;
  position: fixed;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 9px 28px rgba(0, 0, 0, 0.05), 0px 6px 16px rgba(0, 0, 0, 0.08),
    0px 3px 7px rgba(0, 0, 0, 0.12);
  transition: all 0.2s linear;
  z-index: 9;

  // transition:none;
  .messageDrawer_content {
    padding: 16px 24px;

    .drawer_head {
      line-height: 24px;
      display: flex;

      .head_title {
        font-size: 16px;
        color: rgba(0, 0, 0, 0.85);
        flex: 1;
      }

      .head_time {
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        flex: 1;
        text-align: right;
      }
    }

    .drawer_content {
      font-size: 14px;
      line-height: 18px;
      height: 86px;

      .drawer_content_title {
        font-weight: 700;
        margin: 14px 0;
        display: flex;
        align-items: center;

        .drawer_title_content {
          width: 318px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
      }

      .contentText {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 3; //行数
        line-clamp: 3;
        -webkit-box-orient: vertical; //盒子中内容竖直排列
        // height: 50px;/
      }
    }

    .drawer_btn {
      margin-top: 30px;
      display: flex;

      .btn_left {
        flex: 1;
        display: flex;
        align-items: center;
        // padding-left: 20px;
        position: relative;

        .left_content {
          margin: 0 10px;
        }

        .arrow_icon_left {
          display: inline-block;
          width: 17px;
          display: flex;
          align-items: center;
        }

        .arrow_icon {
          cursor: pointer;
          font-size: 14px;
        }
      }

      .btn_right {
        flex: 1;
        text-align: right;
      }
    }
  }
}

.messageDrawer_show {
  // height: 182px;
  height: 218px;
  transition: all 0.2s linear;
}
</style>
